<div id="pills-rel" class="tab-pane">
    <div class="row">
        <div class="col-12">
            <h6>Selected items</h6>
            <table class="table table-sm table-hover" id="tbl-related-products">
                <thead class="thead-light">
                    <tr>
                        <th scope="col" width="5%">
                            <span class="oi oi-move"></span>
                        </th>
                        <th scope="col" width="5%">
                            <span class="oi oi-sort-ascending"></span>
                        </th>
                        <th scope="col">Title</th>
                        <th scope="col" width="15%">Image</th>
                        <th scope="col" width="5%">Showing?</th>
                    </tr>
                </thead>
                <tbody class="sortable product-navs" ng-init="">

                    <tr class="sortable-item" ng-repeat="item in $ctrl.product.productNavs track by $index">
                        <td style="cursor:grab;">
                            <span class="oi oi-move"></span>
                        </td>
                        <td>
                            <input type="text" name="ProductNavs[{{$index}}].Priority" value="{{item.priority}}" class="item-priority form-control form-control-sm d-inline" style="width:40px;">
                        </td>
                        <td>
                            {{item.relatedProduct.title}}
                        </td>
                        <td>
                            <a href="#" ng-if="item.relatedProduct.image!=''" data-toggle="modal" data-target=".image-preview-modal-lg" data-imgsrc="{{item.relatedProduct.image}}">
                                <img class="" ng-src="{{item.relatedProduct.image}}" alt="{{item.relatedProduct.title}}" style="max-height: 50px;">
                            </a>
                        </td>
                        <td style="position:relative">
                            <span class="switch switch-sm" style="position: absolute;top: 10px;">
                                <input type="checkbox" class="switch" data-val="{{item.isActived}}" id="ProductNavs_{{item.relatedProductId}}" name="ProductNavs[{{$index}}].IsActived" ng-model="item.isActived" value="{{item.isActived}}">
                                <label class="switch" for="ProductNavs_{{item.relatedProductId}}">
                                </label>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div><!--activeProducts-->

    <h6>List items</h6>
    <div class="row">
        <div class="col-md-8">
            <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group mr-2">
                    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".upload-image-modal-lg"><i class="mi mi-Add"></i></button>
                </div>
                <div class="btn-group mr-2" role="group" aria-label="Button group with nested dropdown">
                    <div class="btn-group" role="group">
                        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            All media types
                        </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                            <a class="dropdown-item" href="#">All post types</a>
                            <a class="dropdown-item" href="#">Images</a>
                            <a class="dropdown-item" href="#">Audios</a>
                            <a class="dropdown-item" href="#">Videos</a>
                            <a class="dropdown-item" href="#">Documents</a>
                            <a class="dropdown-item" href="#">Zips</a>
                            <a class="dropdown-item" href="#">Others</a>
                        </div>
                    </div>
                </div>
                <div class="btn-group mr-2" role="group" aria-label="Button group with nested dropdown">
                    <div class="btn-group" role="group">
                        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            All times
                        </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                            <a class="dropdown-item" href="#">Jan 2018</a>
                            <a class="dropdown-item" href="#">Dec 2017</a>
                            <a class="dropdown-item" href="#">Nov 2017</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text" id="btnGroupAddon"><i class="mi mi-Search" style="top:0;"></i></div>
                </div>
                <input type="text" class="form-control" placeholder="Search media items..." aria-label="Search media items..." aria-describedby="btnGroupAddon">
            </div>
        </div>
    </div>
    <div>
        <table class="table table-sm table-hover" id="Table">
            <thead class="thead-light">
                <tr>

                    <th scope="col">Title</th>
                    <th scope="col" width="20%">Image</th>
                    <th scope="col" width="5%">Display</th>
                </tr>
            </thead>
            <tbody class="sortable">
                <tr class="sortable-item module-column" ng-repeat="product in $ctrl.list.items" ng-hide="product.isHidden">

                    <td>
                        <small>{{product.title}}</small>
                    </td>
                    <td>
                        <img height="50" ng-src="{{product.image}}">
                    </td>
                    <td>
                        <span class="switch switch-sm">
                            <input type="checkbox" class="switch" id="ProductNavs_{{product.id}}" ng-model="product.isActived" ng-change="$ctrl.activeProduct(product)">
                            <label class="switch" for="ProductNavs_{{product.id}}">
                            </label>
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>